<template>
  <div class="login_container">
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
      style="height: 100%"
    >
    </vue-particles>
    <!-- 登录 -->
    <div id="sign" v-if="login" class="donghua_01">
      <h1>用户登录</h1>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="pass">
          <el-input v-model="ruleForm.pass" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="sqi">
            <el-button
              type="primary"
              icon="el-icon-check"
              @click="submitForm('ruleForm')"
              class="an"
              >提交</el-button
            >
            <el-button icon="el-icon-user-solid" @click="huan_02()" class="an"
              >注册</el-button
            >
            <!-- <el-button @click="resetForm('ruleForm')" icon="el-icon-refresh-left">重置</el-button> -->
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 注册 -->
    <div class="zhuce" v-if="zhuce_01">
      <h1>用户注册</h1>
      <el-form
        :model="zhuce"
        status-icon
        :rules="rules_01"
        ref="zhuce"
        label-width="0px"
        class="demo-zhuce"
      >
        <el-form-item prop="age">
          <el-input placeholder="邮箱" v-model="zhuce.age"></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            type="password"
            v-model="zhuce.pass"
            autocomplete="off"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input
            type="password"
            v-model="zhuce.checkPass"
            autocomplete="off"
            placeholder="确认密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="test" class="test">
          <el-input
            placeholder="验证码"
            v-model.number="zhuce.test"
            class="test_01"
          ></el-input>
          <el-button class="test_02" @click="lest()"
            ><span v-show="sendAuthCode" class="auth_text auth_text_blue"
              >获取验证码</span
            >
            <span v-show="!sendAuthCode" class="auth_text">
              <span class="auth_text_blue">{{ auth_time }} </span>
              秒重新发送</span
            ></el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm_01('zhuce')"
            class="zhuce_an"
            >立即注册</el-button
          >
          <el-button @click="huan_01()" class="an">登录</el-button>
          <!-- <el-button @click="resetForm_01('zhuce')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    // 登录
    var validatePass = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (value === "") {
        callback(new Error("请输入邮箱"));
      }
      if (mailReg.test(value)) {
        callback();
      } else {
        callback(new Error("邮箱格式错误"));
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    // 注册
    var checkAge = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (value == "") {
        return callback(new Error("请输入邮箱"));
      }
      if (mailReg.test(value)) {
        callback();
      } else {
        callback(new Error("邮箱格式错误"));
      }
    };
    var validatePass_01 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.zhuce.checkPass !== "") {
          this.$refs.zhuce.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2_01 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.zhuce.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var test_01 = (rule, value, callback) => {
      const mailReg = /^\d{5}$/;
      if (value == "") {
        return callback(new Error("请输入验证码"));
      }
      if (mailReg.test(value)) {
        callback();
      } else {
        callback(new Error("验证码为5位数字"));
      }
    };
    return {
      ruleForm: {
        pass: "3410515601@qq.com",
        checkPass: "123456",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
      login: true,
      zhuce_01: false,
      // 注册
      zhuce: {
        age: "3410515601@qq.com",
        pass: "123456",
        checkPass: "123456",
        test: "",
      },
      rules_01: {
        pass: [{ validator: validatePass_01, trigger: "blur" }],
        checkPass: [{ validator: validatePass2_01, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }],
        test: [{ validator: test_01, trigger: "blur" }],
      },
      // 倒计时
      sendAuthCode: true /*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */,
      auth_time: 0 /*倒计时 计数器*/,
    };
  },
  methods: {
    // 转首页
    huan_01() {
      this.login = true;
      this.zhuce_01 = false;
    },
    // 转注册
    huan_02() {
      this.login = false;
      this.zhuce_01 = true;
    },
    // 登录验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http
            .post("/login/", {
              email: this.ruleForm.pass,
              password: this.ruleForm.checkPass,
            })
            .then((res) => {
              if (res.code == 0) {
                this.$notify({
                  duration: 1500,
                  title: "成功",
                  message: res.msg,
                  type: "success",
                });
                localStorage.setItem("token_z", res.info.token);
                this.$router.push({
                  path: "/",
                });
              } else if (res.code == 10001) {
                this.$notify.error({
                  duration: 1500,
                  title: "错误",
                  message: res.msg + "，请注册！",
                });
                this.huan_02();
              }
            });
        } else {
          this.$notify.error({
            duration: 1500,
            title: "错误",
            message: "您输入的邮箱或密码格式错误！",
          });
          return false;
        }
      });
    },
    // 注册
    submitForm_01(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("通过");
          this.$http
            .post("/register/", {
              email: this.zhuce.age,
              password: this.zhuce.checkPass,
              emailcode: this.zhuce.test,
            })
            .then((res) => {
              if (res.code == 0) {
                this.$notify({
                  duration: 1500,
                  title: "成功",
                  message: res.msg + "，请登录！",
                  type: "success",
                });
                this.huan_01();
              } else if (res.code == 10001) {
                if (res.msg == "用户已存在") {
                  this.$notify({
                    title: "警告",
                    message: "用户已存在，请登录！",
                    type: "warning",
                  });
                  this.huan_01();
                } else if (res.msg == "验证码错误") {
                  this.$notify({
                    title: "警告",
                    message: "验证码错误，请重新输入！",
                    type: "warning",
                  });
                }
              }
            });
        } else {
          console.log("不通过");
          this.$notify.error({
            duration: 1500,
            title: "错误",
            message: "输入框中存在错误！",
          });
          return false;
        }
      });
    },
    // 获取验证码
    lest() {
      this.getAuthCode(),
        this.$http
          .get("/register/email", {
            email: this.zhuce.age,
          })
          .then((res) => {
            if (res.code == 0) {
              this.$notify({
                title: "成功",
                message: res.msg,
                type: "success",
              });
            }
          })
          .catch((err) => {
            this.$notify.error({
              title: "错误",
              message: "验证码发送失败！",
            });
          });
    },
    // 重置
    // resetForm_01(formName) {
    //   this.$refs[formName].resetFields();
    // },
    //验证码倒计时
    getAuthCode() {
      this.sendAuthCode = false;
      this.auth_time = 60;
      var auth_timetimer = setInterval(() => {
        this.auth_time--;
        if (this.auth_time <= 0) {
          this.sendAuthCode = true;
          clearInterval(auth_timetimer);
        }
      }, 1000);
    },
  },
};
</script>
<style lang="less" scoped>
// 登录
.login_container {
  background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  position: relative;
}
#particles-js {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
}
#sign {
  width: 500px;
  height: 300px;
  text-align: center;
  padding-right: 100px;
  padding-top: 150px;
  color: #ffff;
  margin: 0 auto;
  // border: 1px solid #000;
}
#sign h1 {
  text-align: center;
  padding-left: 100px;
  margin-bottom: 25px;
}
.sqi {
  text-align: center;
}
// 注册
.zhuce {
  width: 400px;
  margin: 0 auto;
  padding-top: 150px;
}
.zhuce h1 {
  color: #ffffff;
  margin-bottom: 25px;
  text-align: center;
}
.test {
  width: 400px;
  display: flex;
  // border: 1px solid #000;
}
.test_01 {
  width: 250px;
}
.test_02 {
  width: 150px;
  height: 39px;
}
.zhuce_an {
  width: 100px;
  margin-left: 100px;
}
.an {
  width: 100px;
}
// css动画
.donghua_01 {
  animation: fadeIn;
  animation-duration: 1s;
}
</style>